<template >
  <v-app :dark="dark">
    <!-- 左侧导航条 -->
    <v-navigation-drawer
      persistent
      :mini-variant="miniVariant"
      v-model="drawer"
      enable-resize-watcher
      fixed
      app
      width="200"
    >
      <v-toolbar flat class="transparent">
        <v-list class="pa-0">
          <v-list-tile avatar>
            <v-list-tile-avatar @click="tocenter">
              <img src="http://47.105.221.242:8888/group1/M00/00/00/rB81RF1832OAHjzZAAAsFwMpUSk42.jpeg" />
            </v-list-tile-avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{truename}}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
        <!--弹出的对话框-->
        <v-dialog max-width="500" v-model="show" @keypress.native="keypress($event)">
          <v-card>
            <v-card-title class="headline">提示框</v-card-title>
            <v-card-text>是否退出</v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>

              <v-btn color="green darken-1" flat @click.stop="show = false">否</v-btn>

              <v-btn color="green darken-1" flat @click.stop="closeWindow">是</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
      <v-divider />
      <!-- 左侧菜单 -->
      <v-list class="pt-0" style="width:400px" dense>
        <v-list-group
          v-model="item.active"
          v-for="item in items"
          :key="item.title"
          :prepend-icon="item.action"
          no-action
        >
          <!--一级菜单 -->
          <v-list-tile slot="activator">
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <!-- 二级菜单 -->
          <v-list-tile
            v-for="subItem in item.items"
            :key="subItem.title"
            :to="item.path + subItem.path"
          >
            <v-list-tile-content>
              <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-icon>{{ subItem.action }}</v-icon>
            </v-list-tile-action>
          </v-list-tile>
        </v-list-group>
      </v-list>
      <v-container wrap style="marginTop:50px">
        <label>魔方软件</label>
        mallfe & cii
      </v-container>
    </v-navigation-drawer>
    <!-- 顶部工具条 -->
    <v-toolbar app dark :color="dark ? 'secondary' : 'primary'">
      <!-- 隐藏左侧菜单的按钮-->
      <v-toolbar-side-icon @click.stop="drawer = !drawer" />
      <!-- 收起左侧菜单的按钮-->

      <!-- 切换黑暗主题 -->
      <v-flex xs1></v-flex>
      <!-- 顶部导航标题 -->
      <v-flex xs3></v-flex>
      <v-toolbar-title v-text="title" />
      <v-spacer />

      <!-- 调色板 -->
      <v-btn icon @click="logout">注销</v-btn>
      <!-- 顶部导航用户菜单 -->
    </v-toolbar>
    <!--中间内容主体-->
    <v-content>
      <v-breadcrumbs>
        <v-icon slot="divider">chevron_right</v-icon>
        <v-breadcrumbs-item>{{item1}}</v-breadcrumbs-item>
        <v-breadcrumbs-item>{{item2}}</v-breadcrumbs-item>
      </v-breadcrumbs>
      <div>
        <!--定义一个路由锚点，Layout的子组件内容将在这里展示-->
        <router-view />
      </div>
    </v-content>
  </v-app>
</template>

<script>
import menus from "../menu";
import clone from "clone";
export default {
  data() {
    return {
      dark: false, // 是否暗黑主题
      drawer: true, // 左侧导航是否隐藏
      miniVariant: false, // 左侧导航是否收起
      title: "仓储物流系统", // 顶部导航条名称,
      menuMap: {},
      show: false, // 控制对话框的显示
      loged: true, // 是否已经登录
      truename: "未登录"
    };
  },
  computed: {
    items() {
      const ah = window.localStorage.getItem("lx") + "";

      var b = clone(menus).filter(m => m.qx.indexOf(ah) >= 0);

      b.forEach((item, index) => {
        b[index].items = [];
      });
      menus.forEach((v, i) => {
        b.forEach((k, index) => {
          if (v.title === k.title && k.path === v.path) {
            b[index].items = v.items.filter(
              m => m.qx.indexOf(ah.toString()) >= 0
            );
          }
        });
      });
      return b;
    },

    item1() {
      const arr = this.$route.path.split("/");
      return this.menuMap[arr[1]].name;
    },

    item2() {
      const arr = this.$route.path.split("/");
      return this.menuMap[arr[1]][arr[2]];
    }
  },
  name: "App",
  watch: {},
  created() {
    menus.forEach(m => {
      const p1 = m.path.slice(1);
      this.menuMap[p1] = { name: m.title };
      m.items.forEach(i => {
        this.menuMap[p1][i.path.slice(1)] = i.title;
      });
    });
    this.truename = window.localStorage.getItem("truename");
    if (this.truename === null || this.truename === undefined) {
      this.$router.push("/login");
    }
  },
  methods: {
    logout() {
      // 修改标记
      // this.isEdit = false;
      // 控制弹窗可见：
      window.localStorage.clear();
      this.show = true;
      // 把oldBrand变为null
      // this.oldBrand = null;
    },
 
    closeWindow() {
      // 重新加载数据
      //this.getDataFromServer();
      // 关闭窗口
      window.localStorage.clear();
      this.$router.push("/login");
      this.show = false;
    },
    tocenter() {
      this.$router.push("/user/info");
    },
    keypress(e) {}
  }
};
</script>

<style scoped>
.box {
  width: 90%;
}
</style>
